<template>
	<view>
		<carHeader :title="title"></carHeader>
		<view class="status-container">
			<view v-for="(item,index) in indexList" :key="index">
				<view class="status-item" :class="{ 'active': item.flag }" @click="change(index)">
					<text>{{item.status}}</text>
				</view>
			</view>
		</view>
		<view v-if="name == '待使用'" class="body">
			<view v-for="(item,index) in data_dsy" :key="index" class="yhq yhq_dsy" @click="youhui" :data-item="item">
				<text class="price" v-if="item.coupons.preferentialMoney!=null">
					{{item.coupons.preferentialMoney}}元
				</text>
				<text class="price" v-if="item.coupons.preferentialMoney===null">
					{{item.coupons.discount}}折
				</text>
				<text class="manjian">
					{{item.coupons.triggerMoney}}
				</text>
				<text class="jiayouzhan">
					{{item.coupons.couponName}}
				</text>
				<text class="zt">
					去使用
				</text>
				<text class="time">
					{{item.coupons.expirationStart}}—{{item.coupons.expirationEnd}}
				</text>
				<view class="xuxian">
				</view>
			</view>
		</view>
		<view v-if="name == '已使用'" class="body">
			<view v-for="(item,index) in data_ysy" :key="index" class="yhq yhq_ysy">
				<text class="price">
					{{item.coupons.preferentialMoney}}
				</text>
				<text class="manjian">
					{{item.coupons.triggerMoney}}
				</text>
				<text class="jiayouzhan">
					{{item.coupons.couponName}}
				</text>
				<text class="zt">
					去使用
				</text>
				<text class="time">
					{{item.coupons.expirationStart}}—{{item.coupons.expirationEnd}}
				</text>
				<view class="xuxian">
				</view>
			</view>
		</view>
		<view v-if="name == '已过期'" class="body">
				<view v-for="(item,index) in data_ygq" :key="index" class="yhq yhq_ygq">
					<text class="price">
						{{item.coupons.preferentialMoney}}
					</text>
					<text class="manjian">
						{{item.coupons.triggerMoney}}
					</text>
					<text class="jiayouzhan">
						{{item.coupons.couponName}}
					</text>
					<text class="zt">
						去使用
					</text>
					<text class="time">
						{{item.coupons.expirationStart}}—{{item.coupons.expirationEnd}}
					</text>
					<view class="xuxian">
					</view>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '优惠券',
				indexList: [{
						status: "待使用",
						flag: true
					},
					{
						status: "已使用",
						flag: false
					},
					{
						status: "已过期",
						flag: false
					}
				],
				name:"待使用",
				data_dsy: [],
				data_ysy: [],
				data_ygq: [],
				money:null
			};
		},
		onLoad(options) {
			  const complexData = {};
			  for (let [key, value] of Object.entries(options)) {
			    complexData[key] = decodeURIComponent(value);
			  }
			  // 使用解析后的数据
			  // console.log(complexData);
			  this.money = complexData.money;
			  console.log(this.money);
			//console.log(options);
			const that = this;
			uni.request({
				url:"http://localhost:8080/carUser/getUserCoupon",
				success(res) {
					console.log(res);
					that.statusList = res.data.data;
					console.log(that.statusList);
					for(let i=0;i < that.statusList.length;i++){
						console.log(that.statusList[i]);
						let item = that.statusList[i];
						if(item.status == 0){
							that.data_dsy.push(item);
						}else if(item.status==1){
							that.data_ysy.push(item);
						}else if(item.status==2){
							that.data_ygq.push(item);
						}
					}
					console.log(that.data_dsy);
					
				},
				fail() {
					console.log("出错了");
				}
			})
		},
		
		methods: {
			change(index) {
				console.log(index);
				for (var i = 0; i < this.indexList.length; i++) {
					this.indexList[i].flag = false;
				}
				this.indexList[index].flag = true;
				this.name = this.indexList[index].status;
			},
			youhui(options){
				console.log(options);
				const conpou = options.currentTarget.dataset.item.coupons;
				console.log(conpou);
				const needMoney = conpou.triggerMoney;
				if(this.money < needMoney){
					uni.showToast({
						title:"无法使用该优惠券"
					})
				}else{
					console.log("携带打折的钱数和优惠券ID返回订单页面");
					const disMoney= null;
					if(conpou.couponType==='discount'){
						disMoney = this.money * conpou.discount;
					}else{
						disMoney = conpou.preferentialMoney;
					}
					// 当前页面发起跳转
					const complexData = {
					  disMoney: disMoney,
					  conpouId:conpou.couponId,
					};
					const queryStr = Object.keys(complexData)
					  .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(complexData[key])}`)
					  .join('&');
					uni.navigateTo({
					  url: `/pages/zhuanyexichequerendingdan/zhuanyexichequerendingdan?${queryStr}`
					});
					
					
				}
				
				
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.carHeader {
		background-size: cover;
		padding-top: 8%;
	}

	.status-container {
		margin-top: -30%;
		display: flex;
		justify-content: space-around;
	}

	.status-item {
		padding: 5rpx 10rpx;
		color: #ffffff;
	}

	.body {
		width: 90%;
		background-color: white;
		margin: 5%;
		overflow: hidden;
		padding-top: 5%;
		border-radius: 50rpx;
	}

	.yhq {
		position: relative;
		height: 210rpx;
		margin: 0% 5% 5%;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.yhq_dsy{
		background-image: url('/static/车联网服务-08我的-08优惠券-01待使用_slices/椭圆 3 拷贝.png');	
	}
	.yhq_ysy{
		background-image: url('/static/车联网服务-08我的-08优惠券-02已使用_slices/椭圆 3 拷贝.png');
	}
	.yhq_ygq{
		background-image: url('/static/车联网服务-08我的-08优惠券-02已使用_slices/椭圆 3 拷贝.png');
	}

	.price::before {
		// content: '￥';
		font-size: 30rpx;
	}

	.price {
		position: absolute;
		top: 40rpx;
		right: 50rpx;
		color: white;
		font-size: 70rpx;
	}
	
	.price_gq_icon{
		position: absolute;
		top: 84rpx;
		left: 450rpx;
		color: white;
		font-size: 30rpx;
	}

	.price_gq{
		position: absolute;
		top: 40rpx;
		left: 480rpx;
		color: white;
		font-size: 70rpx;
		text-decoration: line-through;
	}

	.manjian::before {
		content: '满';
	}

	.manjian {
		position: absolute;
		top: 80rpx;
		left: 40rpx;
		color: white;
		font-weight: bold;
	}

	.manjian::after {
		content: '元可用';
	}

	.jiayouzhan::before {
		content: '仅限于';
	}

	.jiayouzhan {
		position: absolute;
		top: 40rpx;
		left: 40rpx;
		font-size: .5em;
		color: white;
	}

	.jiayouzhan::after {
		content: '使用';
	}
	
	.xuxian{
		position: absolute;
		top: 140rpx;
		left: 17rpx;
		width: 570rpx;
		border-bottom: 1rpx dashed white;
	}

	.zt {
		position: absolute;
		top: 165rpx;
		left: 500rpx;
		color: white;
		font-size: .5em;
	}
	
	.zt::after{
		content: ' >';
	}

	.time::before{
		content: '有效期值：';
	} 
	.time {
		position: absolute;
		top: 165rpx;
		left: 40rpx;
		color: white;
		font-size: .5em
	}

	.active {
		padding-bottom: 10rpx;
		border-bottom: 5rpx solid white;
	}
</style>